<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/statics/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="/statics/layui/css/layui.css"/>
    <script type="text/javascript" src="/statics/layui/layui.js"></script>
    <%@ include file="adpath.jsp"%>
    <link rel="stylesheet" type="text/css" href="<%=cssUrl%>custom.popup-v2.0.css"/>
    <script type="text/javascript" src="<%=jsUrl%>jquery.custom.popup-v2.0.js"></script>
<%--    <script type="text/javascript" src="<%=jsUrl%>layui.all.js"></script>--%>
<%--    <script type="text/javascript" src="/statics/script/jquery-1.8.0.min.js"></script>--%>


</head>
<body>
<div class="dvcontent">
    <div>
        <!--tab start-->
        <div class="tabs">
            <div class="hd">
                <ul>
                    <li class="on" style="box-sizing: initial;-webkit-box-sizing: initial;">车辆管理</li>
                    <li class="on" style="box-sizing: initial;-webkit-box-sizing: initial;">车辆调度</li>
                    <li class="on" style="box-sizing: initial;-webkit-box-sizing: initial;">添加车辆</li>
                </ul>
            </div>
            <div class="bd" style="overflow-y: auto;height: 1200px;">
                <ul style="display: block;padding: 20px;">
                        <div class="sbss" style="margin-top: 10px;margin-bottom: 10px;">
                            <span>车名：</span>
                            <input  style="width:100px;height:30px;" placeholder="输入车名" id="sel_name">
                            <span>排量：</span>
                            <input  style="width:100px;height:30px;" placeholder="输入排量" id="sel_carml">
                            <span>租金：</span>
                            <input  style="width:100px;height:30px;" placeholder="输入租金" id="sel_rent">
                            <span>所属城市：</span>
                            <input  style="width:100px;height:30px;" placeholder="" id="sel_city">
                            <input  type="button" id="search-btn-cars" value="查询车辆">
                            <span>所有门店总计：${cars.size()}  辆</span>
                        </div>
                    <li>
                        <!--分页显示角色信息 start-->
                        <div id="dv1">
                            <table class="table" id="tbRecord">
                                <thead>
                                <tr>
                                    <th>车辆编号</th>
                                    <th>车型</th>
                                    <th>座位</th>
                                    <th>排量</th>
                                    <th>车辆照片</th>
                                    <th>租金</th>
                                    <th>城市</th>
                                    <th>租赁状态</th>
                                    <th>门店</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="tbodyCars">
                                <c:forEach var="cars" items="${cars}">

                                    <tr>
                                        <td>${cars.id}</td>
                                        <td>${cars.name}</td>
                                        <td>${cars.seats}</td>
                                        <td>${cars.carml}</td>
                                        <td><img style="width: 50px;height: 40px;" src="/statics/images/${cars.img}"/></td>
                                        <td>${cars.rentprice}元/天</td>
                                        <td>${cars.shops.city.name}</td>
                                        <td>${cars.rentstatus==1?"未租赁":"租赁中"}</td>
                                        <td>${cars.shops.name}</td>
                                        <c:choose>
                                            <c:when test="${fn:contains(sessionScope.SPRING_SECURITY_CONTEXT.authentication.authorities,'dba')}">
                                                <td class="checkpic"><button onclick="btn_editAuth()">
                                                    <i class="icon-edit bigger-120"></i>修改信息</button><br>&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <button onclick="btn_rentEdit()">
                                                        <i class="icon-edit bigger-120"></i>
                                                        <a href="" style="color:aliceblue;">修改租金</a></button><br>&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <button onclick="btn_delete(1)">
                                                        <i class="icon-trash bigger-120"></i>删除此车</button>
                                                </td>
                                            </c:when>
                                            <c:otherwise>
                                                <td class="checkpic"><button onclick="btn_editAuth2()">
                                                    <i class="icon-edit bigger-120"></i>修改信息</button><br>&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <button onclick="btn_editAuth2()">
                                                        <i class="icon-edit bigger-120"></i>
                                                        <a href="" style="color:aliceblue;">修改租金</a></button><br>&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <button onclick="btn_delete(1)">
                                                        <i class="icon-trash bigger-120"></i>删除此车</button>
                                                </td>
                                            </c:otherwise>
                                        </c:choose>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                        <!--分页显示角色信息 end-->
                    </li>
                </ul>

<%--                2 车辆调度--%>
                <ul style="display: block;padding: 20px;">
                    <form action="#" method="POST" style="margin-top: 10px;margin-bottom: 10px;">
                        <span>车型：</span>
                        <select name="car_type_c" style="height: 40px;width: 120px;margin-right: 10px;">
                            <option value="a">所有</option>
                            <option value="b">SUV</option>
                            <option value="c">轿车</option>
                            <option value="d">跑车</option>
                        </select>
                        <span>所在门店：</span>
                        <select name="car_shop_c" style="height: 40px;width: 120px;margin-right: 10px;">
                            <option value="a">所有</option>
                            <option value="b">一分店</option>
                            <option value="c">二分店</option>
                            <option value="d">三分店</option>
                        </select>
                        <span>车牌号：</span>
                        <input name="car_key_c" placeholder="请输入车牌号" style="height: 40px;width: 180px;margin-right: 10px;">
                        <span>地址：</span>
                        <input name="address_key_c" placeholder="请输入车辆所在地址" style="height: 40px;width: 180px;margin-right: 10px;">
                        <input name="car_search_c" type="submit" value="查询车辆">
                    </form>
                    <li>
                        <!--分页显示角色信息 start-->
                        <div id="dvs">
                            <table class="table" id="tbRecords">
                                <thead>
                                <tr>
                                    <th>车辆编号</th>
                                    <th>照片</th>
                                    <th>车型</th>
                                    <th>车辆品牌</th>
                                    <th>车牌号码</th>
                                    <th>所在门店</th>
                                    <th>地址</th>
                                    <th>门店联系电话</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>001</td>
                                    <td>未上传</td>
                                    <td>SUV</td>
                                    <td>奥迪Q7</td>
                                    <td>川A·88888</td>
                                    <td>武侯区汽车之家</td>
                                    <td>欢乐谷</td>
                                    <td>199323232</td>
                                    <td class="checkpic">
                                        <button onclick="showPopup(1,'<span>指派人员</span>&nbsp;<select><option>张三</option><option>李四</option><option>王五</option></select>&nbsp;&nbsp;&nbsp;<span>门店</span>&nbsp;<select><option>一分店</option><option>二分店</option><option>三分店</option></select>');">
                                            <i class="icon-trash bigger-120"></i>调度</button></td>
                                </tr>


                                </tbody>

                            </table>
                        </div>
                        <!--分页显示角色信息 end-->
                    </li>
                </ul>
<%--                     添加车辆 --%>
                <ul class="theme-popbod dform" style="display: none;">
                    <div class="am-cf admin-main" style="padding-top: 0px;">
                        <!-- content start -->
                        <div class="am-cf admin-main" style="padding-top: 0px;">
                            <!-- content start -->
                            <div class="admin-content">
                                <div class="admin-content-body">

                                    <div class="am-g">
                                        <div class="am-u-sm-12 am-u-md-4 am-u-md-push-8">

                                        </div>
                                        <div class="am-u-sm-12 am-u-md-8 am-u-md-pull-4" style="padding-top: 30px;">
                                            <form class="am-form am-form-horizontal" action="/cars/addCar" method="post">
                                                <%--                                                #{name},#{seats},#{carml},#{img},#{rentstatus},#{rentprice},#{shop_id},#{city_id},#{street_id}--%>
                                                <div class="am-form-group">
                                                    <label class="am-u-sm-3 am-form-label">
                                                        车型</label>
                                                    <div class="am-u-sm-9">
                                                        <input type="text" id="car-model" name="name" required placeholder="车名" >
                                                    </div>
                                                </div>
                                                <div class="am-form-group">
                                                    <label class="am-u-sm-3 am-form-label">
                                                        座位</label>
                                                    <div class="am-u-sm-9">
                                                        <input type="text"  name="seats" required placeholder="座位" >
                                                    </div>
                                                </div>
                                                <div class="am-form-group">
                                                    <label class="am-u-sm-3 am-form-label">
                                                        排量</label>
                                                    <div class="am-u-sm-9">
                                                        <input type="text" id="car-capacity" name="carml" required placeholder="排量">
                                                    </div>
                                                </div>

                                                <div class="am-form-group">
                                                    <label class="am-u-sm-3 am-form-label">
                                                        照片</label>
                                                    <div class="am-u-sm-9">
                                                        <input name="img" id="pics" type="hidden">
                                                        <p class="layui-upload-list">
                                                            <!--预览图片-->
                                                            <img class="layui-upload-img" id="demo1" src="#">
                                                            <!--提示上传信息-->
                                                        </p>
                                                        <button type="button" class="layui-btn" id="load">上传</button>
                                                    </div>
                                                </div>
                                                <div class="am-form-group">
                                                    <label class="am-u-sm-3 am-form-label">
                                                        租金</label>
                                                    <div class="am-u-sm-9">
                                                        <input type="text"  name="rentprice" required placeholder="租金/日">
                                                    </div>
                                                </div>
                                                <div class="am-form-group">
                                                    <label class="am-u-sm-3 am-form-label">
                                                        所在门店</label>
                                                    <div class="am-u-sm-9">
                                                        <select name="shop_id" id="selectShop">
                                                            <c:forEach var="shops" items="${shops}">
                                                                <option value="${shops.id}" city="${shops.city.id}" street="${shops.street.id}">${shops.name}</option>
                                                            </c:forEach>
                                                        </select>
                                                        <input type="hidden" id="cityID" name="city_id">
                                                        <input type="hidden" id="streetID" name="street_id">
                                                        <input type="hidden" name="rentstatus" value="1">
                                                    </div>
                                                </div>
                                                <div class="am-form-group">
                                                    <div class="am-u-sm-9 am-u-sm-push-3">
                                                        <input type="submit" class="am-btn am-btn-success" value="添加车辆🚗" />
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- content end -->
                        </div>
                      </div>

                </ul>
                <!-- end-->
            </div>
        </div>
        <!--tab end-->
    </div>
</div>
<script>

<%--    城市街道 --%>
var btn_rentEdit = function(){
    layer.prompt({title:'修改租金'},function(value, index){
        layer.msg("耶->"+value);
        layer.close(index);
    });
};
var btn_editAuth2 = function(){
    layer.msg("您没有修改的权限！请联系管理员获取权限");
};
var btn_editAuth = function(){
    layer.msg("权限正常");
};

// ajax动态查询车辆信息
$('#search-btn-cars').click(function () {
    var cname = $('#sel_name').val();
    var carml = $('#sel_carml').val();
    var rentprice = $('#sel_rent').val();
    var cityName = $('#sel_city').val();
    $('#tbodyCars').empty();
    $.ajax({
        type: "post",
        url: "/cars/getCarByMoreConditions",
        data: {name:cname,carml:carml,rentprice:rentprice,cityName:cityName},
        success: function (data) {
            if(data.length>0){
                var listInfo="";
                for (let i = 0; i < data.length; i++) {
                    listInfo=listInfo+" <tr>" +
                        "<td>"+data[i].id+"</td>" +
                        "<td>"+data[i].name+"</td>" +
                        "<td>"+data[i].seats+"</td>" +
                        "<td>"+data[i].carml+"</td>" +
                        "<td><img style=\"width: 50px;height: 40px;\" src=\"/statics/images/"+data[i].img+"\"/></td>" +
                        "<td>"+data[i].rentprice+"元/天</td>" +
                        "<td>"+data[i].shops.city.name+"</td>" +
                        "<td>"+data[i].rentstatus+"</td>" +
                        "<td>"+data[i].shops.name+"</td>" +
                        "<td class=\"checkpic\"><button onclick=\"btn_edit(1)\"><i" +
                        " class=\"icon-edit bigger-120\"></i>修改信息</button><br>&nbsp;&nbsp;&nbsp;&nbsp;" +
                        "<button onclick=\"btn_edit(1)\"><i" +
                        " class=\"icon-edit bigger-120\"></i>" +
                        "<a href=\"\" style=\"color:aliceblue;\">租金设置</a></button><br>&nbsp;&nbsp;&nbsp;&nbsp;" +
                        "<button onclick=\"btn_delete(1)\"><i" +
                        " class=\"icon-trash bigger-120\"></i>删除此车</button></td>" +
                        "</tr>";
                }
                $("#tbodyCars").html(listInfo);
            }else {
                layer.msg("未找到该车型！")
            }
        }
    });
});



//简单城市街道联动框
$('#selectShop').change(function () {
    var select = $("#selectShop option:selected");
    $("#cityID").attr("value",select.attr("city"));
    $("#streetID").attr("value",select.attr("street"));
});


    var num = 1;
    $(function() {

        $(".tabs").slide({
            trigger: "click"
        });

    });
    var btn_save = function() {
        var pid = $("#RawMaterialsTypePageId  option:selected").val();
        var name = $("#RawMaterialsTypeName").val();
        var desc = $("#RawMaterialsTypeDescription").val();
        var ramark = $("#Ramark").val();
        $.ajax({
            type: "post",
            url: "/RawMaterialsType/AddRawMaterialsType",
            data: {
                name: name,
                pid: pid,
                desc: desc,
                ramark: ramark
            },
            success: function(data) {
                if (data > 0) {
                    $.jq_Alert({
                        message: "添加成功",
                        btnOktext: "确认",
                        dialogModal: true,
                        btnOkClick: function() {
                            location.reload();

                        }
                    });
                }
            }
        });
        alert(t);
    };
    var btn_edit = function(id) {
        $.jq_Panel({
            url: "/RawMaterialsType/EditRawMaterialsType?id=" + id,
            title: "编辑分类",
            dialogModal: true,
            iframeWidth: 500,
            iframeHeight: 400
        });
    };
    var dispatch = function(id) {
        $.jq_Confirm({
            message: "您确定要调度吗?",
            btnOkClick: function() {
                alert("nihao")
            }
        });
    };

    var mypops = new Array(1);

    $(function() {
        mypops[1] = $.initPopup({
            buttonAlign: "center"
        })
            .addButton("确定", function() {
                alert("调度成功！");
            }).addButton("取消");
    });

    var sonOfpop39;

    function showPopup(index, content) {
        mypops[index].showPopup(content);
    }
</script>

<%--<script type="text/javascript" src="/mgestyle/js/layui.all.js"></script>--%>
<script type="text/javascript" src="/statics/layui/layui.js"></script>
<script>
    layui.use(['upload', 'form'], function() {
        var $ = layui.jquery, upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#load', //选择文件的DOM对象
            url: '/cars/uploadCarImg',
            before: function (obj) { //文件上传前的回调
                //预读本地文件示例
                obj.preview(function (index, files, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            },
            done: function (res) {
                //如果上传失败
                if (res.code>0) {
                    //上传失败
                    document.getElementById("pics").value = res.name;
                } else {
                    document.getElementById("pics").value = res.name;
                }
            },
            error: function () {
                //演示失败状态，并实现重传
                const demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败!</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

    });
</script>
</body>
</html>
